
<h4>Relationship style</h4>

<h5><strong>Default colors</strong></h5>
<div>
  <span>Background Color:</span>
  <input type="color" ng-model="vis.params.canvasBackgroundColor" class="form-control"/>
</div>

<div>
  <span>Node:</span>
  <!-- div colorpicker ng-model="vis.params.firstNodeColor"-->
  <input type="color" ng-model="vis.params.firstNodeColor" class="form-control"/>
  <!--/div-->
</div>

<div class="secondNode">
  <span>Second Node:</span>
  <input type="color" ng-model="vis.params.secondNodeColor" class="form-control"/>
</div>


<br>

<h5><strong>Size</strong></h5>
<div>
  Max Node Size
  <input type="number" ng-model="vis.params.maxNodeSize" min="1">
</div>
<div>
  Min Node Size
  <input type="number" ng-model="vis.params.minNodeSize" min="1">
</div>
<div>
  Max Edge Width
  <input type="number" ng-model="vis.params.maxEdgeSize" min="1">
</div>
<div>
  Min Edge Width
  <input type="number" ng-model="vis.params.minEdgeSize" min="0.1">
</div>

<br>

<h5><strong>Shapes</strong></h5>
<div class="form-group">
  <label for="sel1">Node: </label>
   <select class="form-control" ng-model="vis.params.shapeFirstNode" id="sel1">
     <option value="circle">Circle</option>
     <option value="dot">Dot</option>
     <option value="ellipse">Ellipse</option>
     <option value="database">DataBase</option>
     <option value="box">Box</option>
     <option value="text">Only Text </option>
     <option value="diamond">Diamond</option>
     <option value="star">Star</option>
     <option value="triangle">Triangle</option>
     <option value="triangleDown">Triangle Down</option>
     <option value="square">Square</option>
   </select>
</div>

<div class="form-group secondNode">
  <label for="sel2">Second Node: </label>
   <select class="form-control" ng-model="vis.params.shapeSecondNode" id="sel2">
     <option value="circle">Circle</option>
     <option value="dot">Dot</option>
     <option value="ellipse">Ellipse</option>
     <option value="database">DataBase</option>
     <option value="box">Box</option>
     <option value="text">Only Text </option>
     <option value="diamond">Diamond</option>
     <option value="star">Star</option>
     <option value="triangle">Triangle</option>
     <option value="triangleDown">Triangle Down</option>
     <option value="square">Square</option>
   </select>
</div>

<br>

<h5><strong>Extra</strong></h5>
<div class="checkbox">
  <label>
    <input type="checkbox" ng-model="vis.params.showLabels">
    Show labels
  </label>
  <label>
    <input type="checkbox" ng-model="vis.params.showPopup">
    Show Popup
  </label>
  <label>
    <input type="checkbox" ng-model="vis.params.showColorLegend">
    Show Color Legend (Node Color selected)
  </label>
</div>


<hr>

<h4>Top Values</h4>
<div>
  Node Size
  <input type="number" ng-model="vis.params.maxCutMetricSizeNode" min="1">
</div>
<div>
  Edge Size
  <input type="number" ng-model="vis.params.maxCutMetricSizeEdge" min="1">
</div>
<hr>
